<!--
 @description 职员列表
 @fileName EmployeeList.vue
 @author zengqiongying
 @created 2022/11/07 16:11:30
-->
<template>
  <List
    ref="list"
    :class="{'employee-list-scroll':list.length>0}"
    :finished.sync="finished"
    :reset-fun="resetData"
    :load="load"
    :refresh="load"
  >
    <div
      v-for="(item,i) in list"
      :key="i"
      class="employee-item"
      :class="{
        'disabled':disabledIds.includes(item.id),
        'selected':selectedIds.includes(item.id)
      }"
      @click="handleCheck(item)"
    >
      <div class="item-head">
        <div class="name">{{ item.name }}</div>
        <div class="position">职位：{{ item.positionName }}</div>
      </div>
      <div class="item-shop">门店：{{ item.shopNames }}</div>
      <div v-if="showCustomerCount" class="item-opty">
        <img class="icon" src="@/assets/img/icon-opty.png">
        <span class="d-label">正在跟进中的客户</span>
        <span class="d-val">{{ item.followClueCustomerCount || 0 }} 个</span>
      </div>
    </div>
  </List>
</template>

<script>
import List from '@/components/List'
import { employeePage } from '@/apis/customer'
export default {
  name: 'EmployeeList',
  components: { List },
  props: {
    searchValue: {
      type: String,
      default: ''
    },
    disOrgCodes: {
      type: Array, // 组织编码
      default: () => []
    },
    positionCodes: {
      type: Array, // 职务编码
      default: () => []
    },
    disabledIds: {
      // 禁用ID
      type: Array,
      default: () => []
    },
    showCustomerCount: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filterRaws: {},
      list: [],
      finished: false, // 列表是否加载完成
      selectedData: []
    }
  },
  computed: {
    selectedIds() {
      return this.selectedData.map(v => v.id)
    }
  },
  watch: {
    /* searchValue(v) {
      this.resetPageData()
    } */
  },
  created() {},
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const paramsRaw = {}
      if (this.searchValue) {
        paramsRaw.employeeName = this.searchValue
      }
      if (this.disOrgCodes && this.disOrgCodes instanceof Array && this.disOrgCodes.length > 0) {
        paramsRaw.disOrgCodes = this.disOrgCodes
      }
      if (this.positionCodes && this.positionCodes instanceof Array && this.positionCodes.length > 0) {
        paramsRaw.positionCodes = this.positionCodes
      }
      const data = new FormData()
      data.append('page', page)
      data.append('rows', rows)
      data.append('paramsRaw', JSON.stringify(paramsRaw))

      return employeePage(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    filterPostionList(name) {
      const arrTmp = name.split(',')
      const res = arrTmp.filter(v => v === '设计师' || v === '设计主管')
      return res
    },
    handleCheck(item) {
      if (this.disabledIds && this.disabledIds.length > 0 && this.disabledIds.includes(item.id)) {
        this.$toast('已选择，请勿重复选择')
        return
      }
      const index = this.selectedData.findIndex(v => v.id === item.id)
      if (index > -1) {
        this.selectedData.splice(index, 1)
      } else {
        this.selectedData.push(item)
      }
      this.$emit('select-change', this.selectedData)
    }
  }
}

</script>
<style lang='less' scoped>
.employee-list-scroll{
  min-height:100%;
}
.employee-item{
  width: 100%;
  padding: 0 16px 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
  background: #F8F8FA;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #F8F8FA;
  color: #3C4458;
  &.selected{
    border-color: #16BC83;
  }
  &:first-child{
    margin-top: 16px;
  }
  .item-head{
    position: relative;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #D8DCE3;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    >*{
      padding: 3px 0;
    }
    .name{
      white-space: nowrap;
      margin-right: 10px;
      font-weight: bold;
    }
  }
  .item-shop{
    padding: 14px 0 10px;
    line-height: 1.3;
    font-size: 14px;
  }
  .item-opty{
    padding: 10px 16px 10px 12px;
    background: rgba(255, 255, 255,0.81);
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    .icon{
      width: 42px;
      height: 42px;
      margin-right: 5px;
    }
    .d-label{
      color: #7C89A7;
      flex: 1;
    }
  }
  &.disabled{
    color: #999;
    .item-opty{
      .icon{
        filter: grayscale(100%);
      }
    }
  }
}
</style>
